# Design Checklist

- [Ответственность сторон](#ответственность-сторон)
- [Адаптивность](#адаптивность)
- [Цвета](#цвета)
- [Типографика](#типографика)
- [WYSIWYG](#wysiwyg)
- [Иконки](#иконки)
- [Элементы управления](#элементы-управления)
- [Модальные окна](#модальные-окна)
- [Поведение](#поведение)
- [Figma](#figma)

## Ответственность сторон

- В верстку попадают только те значения, которые вынесены в «официальную» библиотеку стилей и эффектов. Если в макете встречается какая-то отсебятина без внятных комментариев, нужно уведомить дизайнера. Если реакции нет, верстальщику нужно уведомить тимлида или аккаунт менеджера.
  - https://habr.com/ru/post/464115/

## Адаптивность

- Должны быть указаны используемые точки перехода.
- Каждой точке должно быть присвоено обозначение: `screen-xs`, `screen-sm`, `screen-md`, `screen-lg`, `screen-xl`, ...
  - `screen-xs: [0px, 640px)`
  - `screen-sm: [640px, 960px)`
  - `screen-md: [960px, 1280px)`
  - `screen-lg: [1280px, 1600px)`
  - `screen-xl: [1600px, ...)`
- Должны быть заданы параметры сетки:
  - Количество колонок (12, 24, ...);
  - Отступ между колонками;
  - Размер контейнера на разных режимах адаптивности.

## Цвета

- Каждому из основных цветов сайта должно быть присвоено обозначение `primary`, `secondary`, `tertiary`, ...
- Должны быть описаны системные цвета
  - `error` - **ошибка**,
  - `info` - **информация**,
  - `success` - **успех**,
  - `warning` - **предупреждение**.
- Для каждого цвета задаётся оттенок от `100` до `1000` с шагом `100`, где
  - `100` - **самый светлый**;
  - `1000` - **самый тёмный**.
    - https://ant.design/docs/spec/colors#Palette-Generation-Tool.
- Дополнительно задаются оттенки серого, также от `100` до `1000`, с обозначением `gray`.
  - https://ant.design/docs/spec/colors#Neutral-Color-Palette.
- Также рекомендуется описать полупрозрачные чёрные и белые оттенки на белом и чёрном фоне, соответствующие описанным выше серым оттенкам. Эти оттенки рекомендуется использовать для текста и линий для уменьшения эффекта "грязного" цвета (https://www.viget.com/articles/equating-color-and-transparency/).
  - https://ant.design/docs/spec/colors#Neutral-Color.
- Все описанные выше цвета должны быть вынесены в стили Figma и использованы через них. Использование цветов не через стили или цветов не описанных в палитре - **не допускается**.

## Типографика

- Все используемые шрифты должны быть приложены к макету.
- У используемых шрифтов лицензия для использования в Web должна быть свободна или куплена.
- Должны быть перечислены используемые варианты начертания используемых шрифтов (жирность, наклон)
- Должны быть перечислены все используемые стили текста (размер шрифта, высота строки) для каждого используемого экрана.

  |   Стиль   |   family  |      xs     |      sm     |      md     |      lg     |      xl     |
  |:---------:|:---------:|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
  |   **h1**  |  `Roboto` | `26px/36px` | `28px/38px` | `30px/40px` | `34px/44px` | `36px/46px` |
  |   **h2**  |  `Roboto` | `24px/34px` | `26px/36px` | `28px/38px` | `30px/40px` | `32px/42px` |
  |    ...    |    ...    |     ...     |     ...     |     ...     |     ...     |     ...     |
  |   **p**   | `PT-Sans` | `14px/18px` | `16px/26px` | `16px/26px` | `16px/26px` | `16px/26px` |
  |    ...    |    ...    |     ...     |     ...     |     ...     |     ...     |     ...     |

- В результате должен получиться такой набор стилей в Figma:

  | Desktop 1600+ | Laptop 1280-1600 | Tablet L 960-1280 | Tablet S 640-960 | Mobile 0-640 |
  |:-------------:|:----------------:|:-----------------:|:----------------:|:------------:|
  |    `xl/h1`    |      `lg/h1`     |      `md/h1`      |      `sm/h1`     |    `xs/h1`   |
  |    `xl/h2`    |      `lg/h2`     |      `md/h2`      |      `sm/h2`     |    `xs/h2`   |
  |      ...      |        ...       |        ...        |        ...       |      ...     |
  |     `xl/p`    |      `lg/p`      |       `md/p`      |      `sm/p`      |    `xs/p`    |
  |      ...      |        ...       |        ...        |        ...       |      ...     |

- В Less стилях это будет выглядеть следующим образом:

  ```less
  @font-h1-xs: 26px/36px;
  @font-h1-sm: 30px/40px;
  @font-h1-md: 30px/40px;
  @font-h1-lg: 36px/46px;
  @font-h1-xl: 36px/46px;
  @font-h2-xs: 24px/34px;
  @font-h2-sm: 26px/36px;
  @font-h2-md: 26px/36px;
  @font-h2-lg: 30px/40px;
  @font-h2-xl: 30px/40px;
  // …
  @font-p-xs: 14px/18px;
  @font-p-sm: 16px/26px;
  @font-p-md: 16px/26px;
  @font-p-lg: 16px/26px;
  @font-p-xl: 16px/26px;
  // …
  ```

- На каждом экране могут использоваться только стили соответствующие этому экрану, т.е. для экрана `xs`, могут использоваться только стили с суффиксом `-xs` (`font-h1-xs`, `font-h2-xs`, ...).
- Должно сохраняться единство стиля для разных размеров экрана, т.е. если на экране `xs` для текста используется размер `font-h3-xs`, то на экране `md` должен использоваться только стиль `font-h3-md`.

## WYSIWYG

- Если сайт предполагает вывод форматированного пользовательского контента (WYSIWYG), отдельно должны быть описаны все контентные стили:

  |      Тег     | Описание                                   |     Тип     | Стили |
  |:------------:|--------------------------------------------|:-----------:|-------|
  |    `h1-h6`   | <h3>Заголовки</h3>                         | **Блочный** | <ul><li>Должен применяться соответствующий стиль из типографики;</li><li>Должны быть заданы отступы;</li><li>Не дублировать описание стилей.</li></ul> |
  |      `p`     | <p>Параграф</p>                            | **Блочный** | <ul><li>Должен применяться соответствующий стиль из типографики;</li><li>Должны быть заданы отступы;</li><li>Не дублировать описание стилей.</li></ul> |
  |      `a`     | <a>Ссылка</a>                              |  _Строчный_ | <ul><li>Должны применяться стили Link.</li></ul> |
  |    `abbr`    | <abbr title="Описание">Аббревиатура</abbr> |  _Строчный_ | |
  |    `cite`    | <cite>Сноска</cite>                        |  _Строчный_ | |
  |    `code`    | <pre><code>Код программы</code></pre>      |  _Строчный_ | <ul><li>Должен использоваться моноширный шрифт.</li></ul> |
  |     `em`     | <em>Акцент</em>                            |  _Строчный_ | |
  |      `q`     | <q>Цитата</q>                              |  _Строчный_ | |
  |   `strong`   | <strong>Акцент</strong>                    |  _Строчный_ | |
  |   `address`  | <address>Информация об адресе</address>    | **Блочный** | |
  | `dl, dt, dd` | Список терминов                            | **Блочный** | <ul><li>Должны быть прописаны отступы самого блока и элементов.</li></ul> |
  | `blockquote` | <blockquote>Цитата</blockquote>            | **Блочный** | <ul><li>Должны быть указаны отступы от соседних элементов.</li></ul> |
  |     `ul`     | <ul><li>Маркированный список</li></ul>     | **Блочный** | <ul><li>Должны быть указаны отступы от соседних элементов.</li></ul> |
  |     `ol`     | <ol><li>Нумерованный список</li></ol>      | **Блочный** | <ul><li>Должны быть указаны отступы от соседних элементов.</li></ul> |
  |     `li`     | Элемент списка                             | **Блочный** | Должны быть указаны <ul><li>Отступы от соседних элементов;</li><li>Текст в несколько строк;</li><li>Правила вложенных элементов: <ul><li>отступы;</li><li>маркеры.</li></ul></li></ul> |
  |    `table`   | Таблица                                    |             | |
  |   `caption`  | Заголовок таблицы                          |             | |
  |     `tr`     | Строка таблицы                             |             | |
  |     `th`     | Заголовок столбца/строки таблицы           |             | |
  |     `td`     | Ячейка таблицы                             |             | |
  |     `hr`     | Горизонтальная линия<hr />                 | **Блочный** | |

## Иконки

- Иконки должны быть отрисованы в `svg`.
- При рисовании иконок допускается только использование примитивов:
  - линии;
  - фигуры:
    - окружности;
    - эллипсы;
    - прямоугольники;
    - многоугольники;
    - ...
- **Не допускается** использование:
  - масок;
  - фильтров;
  - трансформаций;
  - встроенных изображений.
- Рекомендуется линии рисовать линиями (`stroke`), а объекты фигурами (`fill`).
- Исходники иконок должны быть вынесены на отдельную страницу, все они должны иметь одинаковый размер (по высоте).

## Элементы управления

- Все элементы должны иметь состояния:
  - normal;
  - hover;
  - focus;
  - active;
  - disabled.
- Для ссылок также должны быть описаны состояния visited.
- Для элементов ввода информации (`input`, `select`, `textarea`, ...) также должны быть описаны состояния успешной и неуспешной валидации. Должно быть предусмотрено поведение, если текст ошибки больше одной строки.
- Отдельно должно быть описано, как выводить общие ошибки формы (не привязанные к конкретному полю).
- Для `input` должны быть описаны стили встроенных иконок.
  - Иконки могут быть активные;
  - Иконок может быть несколько.
- Для кнопок должны быть заданы минимальные отступы текста.
- Для кнопок должен быть предусмотрен вариант, когда текст не помещается в кнопку.
- Должны быть описаны все возможные варианты кнопок (цвета, форма, размер, ...).
- Для элементов управления должны быть заданы отступы от соседних элементов (вертикальные и горизонтальные).

## Модальные окна

- Должен быть описан цвет подложки модального окна.
- Должны быть описаны размеры модального окна для разных режимов адаптивности.
- Должно быть описано поведение модального окна (закрывается ли по клику на подложку).

## Поведение

- Любой текст (заголовки, лейблы, теги, пункты меню, может быть очень длинным) и любые элементы (теги, кнопки, карточки, ...) могут не помещаться в экран и/или переноситься на 2 и более строк. Это поведение должно быть описано. Должно быть описано не менее 3-состояний:
  - обычное;
  - нет данных;
  - очень много данных.
- Для контентных изображений должна быть описана логика позиционирования:
  - Какой размер контейнера изображения?
  - Как масштабируется изображение не совпадающее по размеру (с полями, с обрезкой краёв)
  - Как позиционируется изображение не совпадающее по соотношению сторон (верх, низ, лево, право, центр)
- Для контентных изображений должна быть указана заглушка, если изображение ещё не загрузилось или отсутствует.
- Для каталогов предполагающих фильтрацию (списков новостей, каталогов товаров, ...) должно быть указано состояние "_ничего не найдено_".
- Если в блоке текста не **wysiwyg** используется перенос текста, об этом должен быть комментарий.

## Figma

- Названия проектов должны быть на английском языке. Не должны использоваться спец-символы.
- Страницы должны быть сгруппированы по сущностям с разными режимами адаптивности.
  - Пример:
    - **Первый ряд** - _Список новостей_: `Десктоп`, `планшет`, `мобилка`;
    - **Второй ряд** - _Новость Х_: `Десктоп`, `планшет`, `мобилка`;
